$(() => {
  console.log('文章编辑页JS')
  // 👍 通过 URLSearchParams 对象提供的 get() 方法可以获取某个url参数的值
  const usp = new URLSearchParams(location.search)
  const id = usp.get('id')
  console.log('获取地址栏上的文章id', id)

  // 业务2：下拉类别列表渲染
  const getCategoryList = () => {
    myAjax('GET', '/admin/category/list', {}, (res) => {
      const htmlStr = template('moban', res)
      // 📌注意两个请求优先级问题：
      // 1. 先渲染完成类别列表
      $('#category').html(htmlStr)
      // 2. 再获取文章详情
      getArticleInfo()
    })
  }
  getCategoryList()

  // 根据 id 获取文章详情
  const getArticleInfo = () => {
    myAjax('GET', '/admin/article/search', { id: id }, (res) => {
      console.log('文章详情', res)
      // 错误提示写到前面，注意 return 退出
      if (res.code !== 200) return layer.msg(res.msg)
      // 标题
      $('#inputTitle').val(res.data.title)
      // 封面：设置图片 src 路径
      $('.article_cover').prop('src', res.data.cover)
      // 类别
      $('#category').val(res.data.categoryId)
      // 日期
      $('#articleDate').val(res.data.date)
      // 内容
      $('#articleContent').val(res.data.content)
    })
  }

  // 业务3：渲染日期选择组件 - ✨从发布文章页CV即可
  const renderDate = () => {
    // 日期组件：http://layui-doc.pearadmin.com/doc/modules/laydate.html
    layui.use('laydate', function () {
      var laydate = layui.laydate
      // 执行一个laydate实例
      laydate.render({
        elem: '#articleDate', // 指定元素，改成项目中的 id
      })
    })
  }
  renderDate()

  // 业务4：初始化富文本编辑器 - ✨从发布文章页CV即可
  const renderRichText = () => {
    tinymce.init({
      selector: '#articleContent',
      // 本地化配置 - language（界面语言）
      language: 'zh_CN',
    })
  }
  renderRichText()

  // 业务5：提交表单事件
  $('form').on('submit', function (e) {
    // 阻止默认行为
    e.preventDefault()
    // 通过 FormData 收集表单数据
    const fd = new FormData($('form').get(0))
    // 添加文章 id 参数
    fd.append('id', id)
    fd.append('state', state)
    // 打印检查参数收集情况
    fd.forEach((value, key) => {
      console.log({ value, key })
    })
    // 发送编辑 ajax 请求
    myAjax('POST', '/admin/article/edit', fd, (res) => {
      // 失败情况
      if (res.code !== 200) return layer.msg(res.msg)
      // 成功情况
      layer.msg('编辑成功', { icon: 1, time: 1000 }, () => {
        // 轻提示结束后跳转
        location.href = 'article_list.html'
      })
    })
  })

  let state = ''
  // 先触发按钮自身事件，再冒泡触发表单提交事件
  $('.btn-edit').on('click', () => {
    state = '已发布'
  })

  // 图片预览效果
  $('#inputCover').on('change', function () {
    // 基于文件对象创建一个用于预览的url地址
    const url = URL.createObjectURL(this.files[0])
    // console.log('用于图片预览的url地址', url)
    $('.article_cover').prop('src', url)
  })
})
